<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no" />
    <title>物流详情</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
    body {
        background: #f3f3f3;
        font-size: 16px;
    }
    .aui-nav{
        height: auto;
    }
    .aui-icon-left {
        padding-left: 10px;
    }
    
    header {
        width: 100%;
        background: #fff;
        position: relative;
        z-index: 9;
    }
    
    .win_title {
        text-align: center;
        width: 100%;
        line-height: 45px;
        height: 45px;
    }
    
    .aui-iconfont {
        position: absolute;
    }
    .contain{
        margin-top: 45px;
    }
    .logisticsTitle{
        padding: 15px;
        background: #fff;
    }
    .logisticsList li.active p{
        color: #32b16c;
    }

    .logisticsList{
        padding-left: 45px;
        padding-right: 15px;
    }
    .logisticsList li{
        position: relative;
        padding: 15px 0;
    }
    .logisticsList li em{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #9c9c9c;
        display: block;
        float: left;
        position: absolute;
        left: -25px;
        top: 20px;

    }
    .logisticsList li:first-of-type em:before,.logisticsList li:last-of-type em:after{
        width: 0;
    }
    .logisticsList li em:before{
        content: "";
        width: 2px;
        background: #9c9c9c;
        position: absolute;
        top: -500%;
        bottom: 0;
        left: 4px;
    }
    .logisticsList li em:after{
        content: "";
        width: 2px;
        background: #9c9c9c;
        position: absolute;
        bottom: -500%;
        top: 0;
        left: 4px;
    }
    li.active span{
        color: #4f6ea6;
    }
    .logisticsList li.active em:before,
    .logisticsList li.active em:after,
    .logisticsList li.active em{
        background: #32b16c;
    }
    .aui-list-view-cell{
        overflow: inherit;
    }
    </style>
</head>

<body>
    <header class=" aui-nav" style="top:0;bottom:inherit;">
        <div class="win_title aui-border-b">
            <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
            <div class="">
                物流详情
            </div>
        </div>
    </header>
    <div class="contain">
        <ul class="aui-list-view">
            <li class="aui-list-view-cell" >
               <p>支付方式：在线支付</p>
               <p>配送公司：集运通</p>
               <p>订货单号：201610202145874445123655412</p>
            </li>
        </ul>
        <div class="logisticsTitle">物流详情</div>
        <ul class="aui-list-view logisticsList">
            <li class="aui-list-view-cell  active" >
               <em></em>
               <p>【广州市】【已签收】，感谢使用金运通物流，期待再次为您服务</p>
               <p>2016-10-21  11:43:50</p>
            </li>
            <li class="aui-list-view-cell active" >
               <em></em>
               <p>【广州市】【已签收】，感谢使用金运通物流，期待再次为您服务</p>
               <p>2016-10-21  11:43:50</p>
            </li>
            <li class="aui-list-view-cell" >
               <em></em>
               <p>【广州市】【已签收】，感谢使用金运通物流，期待再次为您服务</p>
               <p>2016-10-21  11:43:50</p>
            </li>
            <li class="aui-list-view-cell" >
               <em></em>
               <p>【广州市】【已签收】，感谢使用金运通物流，期待再次为您服务</p>
               <p>2016-10-21  11:43:50</p>
            </li>
            <li class="aui-list-view-cell" >
               <em></em>
               <p>【广州市】【已签收】，感谢使用金运通物流，期待再次为您服务</p>
               <p>2016-10-21  11:43:50</p>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript">
apiready = function() {
    api.parseTapmode();
    var mobile = api.pageParam.mobile;
    var header = $api.dom('header');
    var footer = $api.dom('footer');
    //$api.fixStatusBar(header);
    api.setStatusBarStyle({
        style: 'light'
    });
}

</script>

</html>
